<!--服务信息-申请用气办理指南-->
<template>
  <div class="gasGuide-box">
    <PageTitle class="boxTitle" :text="title"></PageTitle>
    <div class="detailContent con-box">
      <div class="primary-tit title">营业网点均公示用户清单报价明细表和用气报装业务流程图</div>
      <div class="imgContent">
        <img v-for="i in imgList" :key="i" :src="i" @tap.stop="previewImage(i,imgList)" />
      </div>
      <div class="primary-tit title">线上线下办理渠道</div>
      <h3>一、微信公众号</h3>
      <b class="b">关注“重庆中燃城市燃气发展有限公司”线上缴费进入</b>
      <div class="imgContent">
        <img v-for="i in imgList2" :key="i" :src="i" @tap.stop="previewImage(i,imgList2)" />
      </div>
      <h3>二、微信搜索壹品慧小程序，进入燃气服务界面</h3>
      <b class="b">操作步骤如下：</b>
      <div class="imgContent">
        <img v-for="i in imgList3" :key="i" :src="i" @tap.stop="previewImage(i,imgList3)" />
      </div>
      <h3>三、APP“壹品慧”</h3>
      <b class="b">下载来源：应用商城搜索“壹品慧”，链接：</b>
      <b class="a" @click="download(link1)">{{link1}}</b>
      <p class="p">网页截图如下：</p>
      <div class="imgContent">
        <img v-for="i in imgList4" :key="i" :src="i" @tap.stop="previewImage(i,imgList4)" />
      </div>
      <p class="p">手机搜索截图如下：</p>
      <div class="imgContent">
        <img v-for="i in imgList5" :key="i" :src="i" @tap.stop="previewImage(i,imgList5)" />
      </div>
      <h3>四、渝快办网上办理</h3>
      <b class="b">用户可通过渝快办进行网上申办办理，网址连接及网页截图：</b>
      <b class="a" @click="download(link2)">{{link2}}</b>
      <div class="imgContent">
        <img v-for="i in imgList6" :key="i" :src="i" @tap.stop="previewImage(i,imgList6)" />
      </div>
      <h3>五、线下办理渠道</h3>
      <b class="b">用户可前往重庆中燃城市燃气发展有限公司锦湖路营业厅办理，地址：重庆市渝北区锦湖路48号。</b>
      <div class="primary-tit title">资料示范模板</div>
      <b class="b">用户用气申请，提交以下资料模板中的附件1-3，受理出具附件4或附件5，现场勘查及用气方案模板为附件6，附件7。</b>
      <div class="imgContent">
        <img v-for="i in imgList7" :key="i" :src="i" @tap.stop="previewImage(i,imgList7)" />
      </div>
      <div class="imgContent">
        <img v-for="i in imgList8" :key="i" :src="i" @tap.stop="previewImage(i,imgList8)" />
      </div>
    </div>
    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../../components/pageTitle.vue'
import FooterTel from '../../components/footerTel.vue'
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel
  },
  data () {
    return {
      title: null,
      imgList: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/01.png'
      ],
      imgList2: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/02.png'
      ],
      imgList3: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/03.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/04.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/05.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/06.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/07.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/08.png',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/09.png'
      ],
      imgList4: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/10.png'
      ],
      imgList5: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/11.png'
      ],
      imgList6: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/12.png'
      ],
      imgList7: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj01.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj02.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj03.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj04.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj05.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj06.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/fj07.jpg'
      ],
      imgList8: [
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/13.jpg',
        'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/serviceInfo/14.jpg'
      ],
      link1: 'https://appgallery.huawei.com/app/C105298071?sharePrepath=ag&locale=zh_CN&source=appshare&subsource=C105298071&shareTo=weixin&shareFrom=appmarket&shareIds=eaec7ddcbfe44e658d56c0c18c7a1b73_1&callType=SHARE',
      link2: 'https://zwykb.cq.gov.cn/qxzz/ybq/bszn/?itemid=a191ac26-d493-4e31-8a9a-10a82729fa72&regncode=&targetType=',
    };
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
  },
  created () { },
  methods: {
    previewImage (i, list) {
      this.func.previewImg(i, list)
    },
    download (url) {
      if (!url) return
      window.location.href = url;
    },
  },
  mounted () {
    var vm = this;
  },
};
</script>

<style lang="scss" scoped>
@import "../../../static/css/module.scss";
.gasGuide-box {
  padding-bottom: 10px;
  .boxTitle {
    margin: 10px 14px;
  }
  .primary-tit {
    height: auto !important;
    min-height: 16px;
  }
  b.b {
    text-indent: 2rem;
  }
  .detailContent {
    .imgContent {
      width: auto;
      img {
        width: 100%;
      }
    }
  }
  .detailContent,
  .tips {
    padding: 20px 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
  }
}
</style>
